<template>
	<uni-popup type="bottom" ref="aboutus">
		<view class="aboutus">
			<div class="header">
				<img @click="close" src="../static/close.svg" class="close-icon" alt="" srcset="">
				<text class="header-title">联系我们</text>
			</div>
			<div class="body">
				<text class="desc">RUA</text>
			</div>
			<div class="tip">
				<text>有任何问题或者要求请联系我</text>
			</div>
			<button class="contact-btn" open-type="contact">
				联系我
			</button>
		</view>
	</uni-popup>
</template>

<script>
	export default {
		name: "AboutusPopup",
		data() {
			return {

			};
		},
		methods: {
			open() {
				this.$refs.aboutus.open()
			},
			close() {
				this.$refs.aboutus.close()
			}
		}
	}
</script>

<style scoped lang="scss">
	.aboutus::after {
		display: table;
		content: "";
		clear: both;
	}

	.aboutus {
		background-color: white;
		border-top-left-radius: 30upx;
		border-top-right-radius: 30upx;
		padding-top: 24upx;

		.header {
			height: 80upx;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;


			.header-title {
				font-size: 30upx;
				font-weight: bolder;
			}

			.close-icon {
				width: 40upx;
				height: 40upx;
				position: absolute;
				left: 24upx;
				top: 20upx;
			}

		}

		.body {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 20upx;
			padding-top: 20upx;
			padding-bottom: 20upx;
			background-color: #f2f7ff;

			.desc {
				font-size: 80upx;
			}
		}

		.tip {
			display: flex;
			justify-content: center;
			color: #00000050;
			margin-top: 20upx;
			text-align: center;
			margin-bottom: 40upx;
		}

		.contact-btn {
			font-size: 34upx;
			height: 80upx;
			line-height: 80upx;
			margin: 40upx auto;
			width: 96%;
			background-color: $uni-color-primary;
			color: white;
			border-radius: 8upx;
			display: flex;
			align-items: center;
			justify-content: center;
		}

	}
</style>